<!DOCTYPE html>
<html>
<!--
Copyright 2008 The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by an Apache 2.0 License.
See the COPYING file for details.
-->
<!--

  @author gboyer@google.com (Garrett Boyer)
-->
<head>
<title>Closure Unit Tests - goog.ui.ComboBox</title>
<style type='text/css'>
.goog-menu {
  position: absolute;
}
</style>
<script src="../base.js"></script>
<script>
  goog.require('goog.dom');
  goog.require('goog.dom.TagName');
  goog.require('goog.dom.classes');
  goog.require('goog.events');
  goog.require('goog.events.KeyCodes');
  goog.require('goog.testing.events');
  goog.require('goog.testing.jsunit');
  goog.require('goog.ui.ComboBox');
</script>
</head>
<body>

<h2 style="color:red">
This test is rudimentary.
The fact that it passes should not (yet) make you too confident.
</h2>

<div id="combo">
</div>

<div id="menu">
  <div class="goog-combobox-item">Red</div>
  <div class="goog-combobox-item">Green</div>
  <div class="goog-combobox-item">Blue</div>
</div>

<script>

var comboBox;
var input;

function setUp() {
  goog.dom.getElement('combo').innerHTML = '';

  comboBox = new goog.ui.ComboBox();
  comboBox.setDefaultText('Select a color...');
  comboBox.addItem(new goog.ui.ComboBoxItem('Red'));
  comboBox.addItem(new goog.ui.ComboBoxItem('Maroon'));
  comboBox.addItem(new goog.ui.ComboBoxItem('Gre&lt;en'));
  comboBox.addItem(new goog.ui.ComboBoxItem('Blue', 'Blue&gt;Data'));
  comboBox.addItem(new goog.ui.ComboBoxItem('Royal Blue'));
  comboBox.addItem(new goog.ui.ComboBoxItem('Yellow'));
  comboBox.addItem(new goog.ui.ComboBoxItem('Magenta'));
  comboBox.addItem(new goog.ui.ComboBoxItem('Mouve'));
  comboBox.addItem(new goog.ui.ComboBoxItem('Grey'));
  comboBox.render(goog.dom.getElement('combo'));

  input = comboBox.getElement().getElementsByTagName(
      goog.dom.TagName.INPUT)[0];
}

function tearDown() {
  comboBox.dispose();
  goog.events.removeAll();
}

function testGetMenu() {
  assertTrue('Menu should be instance of goog.ui.Menu',
      comboBox.getMenu() instanceof goog.ui.Menu);
  assertEquals('Menu should have correct number of children',
      9, comboBox.getMenu().getChildCount());
}

function testMenuBeginsInvisible() {
  assertFalse('Menu should begin invisible', comboBox.getMenu().isVisible());
}

function testClickCausesPopup() {
  goog.testing.events.fireClickSequence(input);
  assertTrue('Menu becomes visible after click',
      comboBox.getMenu().isVisible());
}

function testUpKeyCausesPopup() {
  goog.testing.events.fireKeySequence(input, goog.events.KeyCodes.UP);
  assertTrue('Menu becomes visible after UP key',
      comboBox.getMenu().isVisible());
}

function testActionSelectsItem() {
  comboBox.getMenu().getItemAt(2).dispatchEvent(
      goog.ui.Component.EventType.ACTION);
  assertEquals('Gre<en', input.value);
}

function testActionSelectsItemWithData() {
  comboBox.getMenu().getItemAt(3).dispatchEvent(
      goog.ui.Component.EventType.ACTION);
      assertEquals('Blue>Data', input.value);
}

function testRedisplayMenuAfterBackspace() {
  input.value = 'mx';
  comboBox.onInputChange_();
  input.value = 'm';
  comboBox.onInputChange_();
  assertEquals('Three items should be displayed',
      3, comboBox.getNumberOfVisibleItems_());
}

function testExternallyCreatedMenu() {
  var menu = new goog.ui.Menu();
  menu.decorate(goog.dom.getElement('menu'));
  assertTrue('Menu items should be instances of goog.ui.ComboBoxItem',
      menu.getChildAt(0) instanceof goog.ui.ComboBoxItem);

  comboBox = new goog.ui.ComboBox(null, menu);
  comboBox.render(goog.dom.getElement('combo'));

  input = comboBox.getElement().getElementsByTagName(
      goog.dom.TagName.INPUT)[0];
  menu.getItemAt(2).dispatchEvent(
      goog.ui.Component.EventType.ACTION);
  assertEquals('Blue', input.value);
}

function testRecomputeVisibleCountAfterChangingItems() {
  input.value = 'Black';
  comboBox.onInputChange_();
  assertEquals('No items should be displayed',
      0, comboBox.getNumberOfVisibleItems_());
  comboBox.addItem(new goog.ui.ComboBoxItem('Black'));
  assertEquals('One item should be displayed',
      1, comboBox.getNumberOfVisibleItems_());

  input.value = 'Red';
  comboBox.onInputChange_();
  assertEquals('One item should be displayed',
      1, comboBox.getNumberOfVisibleItems_());
  comboBox.removeItemAt(0);  // Red
  assertEquals('No items should be displayed',
      0, comboBox.getNumberOfVisibleItems_());  
}

function testSetEnabled() {
  // By default, everything should be enabled.
  assertFalse('Text input should initially not be disabled', input.disabled);
  assertFalse('Text input should initially not look disabled',
      goog.dom.classes.has(input,
      goog.getCssName(goog.ui.LabelInput.prototype.LABEL_CLASS_NAME,
          'disabled')));
  assertFalse('Combo box should initially not look disabled',
      goog.dom.classes.has(comboBox.getElement(),
      goog.getCssName('goog-combobox-disabled')));
  goog.testing.events.fireClickSequence(comboBox.getElement());
  assertTrue('Menu initially becomes visible after click',
      comboBox.getMenu().isVisible());
  goog.testing.events.fireClickSequence(document);
  assertFalse('Menu initially becomes invisible after document click',
      comboBox.getMenu().isVisible());

  comboBox.setEnabled(false);
  assertTrue('Text input should be disabled after being disabled',
      input.disabled);
  assertTrue('Text input should appear disabled after being disabled',
      goog.dom.classes.has(input,
      goog.getCssName(goog.ui.LabelInput.prototype.LABEL_CLASS_NAME,
          'disabled')));
  assertTrue('Combo box should appear disabled after being disabled',
      goog.dom.classes.has(comboBox.getElement(),
      goog.getCssName('goog-combobox-disabled')));
  goog.testing.events.fireClickSequence(comboBox.getElement());
  assertFalse('Menu should not become visible after click if disabled',
      comboBox.getMenu().isVisible());

  comboBox.setEnabled(true);
  assertFalse('Text input should not be disabled after being re-enabled',
      input.disabled);
  assertFalse('Text input should not appear disabled after being re-enabled',
      goog.dom.classes.has(input,
      goog.getCssName(goog.ui.LabelInput.prototype.LABEL_CLASS_NAME,
          'disabled')));
  assertFalse('Combo box should not appear disabled after being re-enabled',
      goog.dom.classes.has(comboBox.getElement(),
      goog.getCssName('goog-combobox-disabled')));
  goog.testing.events.fireClickSequence(comboBox.getElement());
  assertTrue('Menu becomes visible after click when re-enabled',
      comboBox.getMenu().isVisible());
  goog.testing.events.fireClickSequence(document);
  assertFalse('Menu becomes invisible after document click when re-enabled',
      comboBox.getMenu().isVisible());
}

</script>
</body>
</html>
